<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { Table } from '@/components/Table'
import Level from './components/Level.vue'
import { apiData } from './apiData'
import { ElTag } from 'element-plus'
import { useRouter } from 'vue-router'
import { reactive, ref } from 'vue'

const $router = useRouter()

// const loading = ref(true)

const filterOptions = reactive({
    resourceLevel: 'local',
    resourceBasicCatalog: 'all',
    resourceThemeCatalog: 'all',
    resourceType: 'all'
})

const transformState = (state: string) => {
    switch (state) {
        case 'public':
            return '公开'
        case 'limit':
            return '有条件共享'
        default:
            return '未知'
    }
}

const goDetail = (row?: any) => {
    console.log(row)
    $router.push({
        name: 'ToolDetail',
        query: {
            name: row.name
        }
    })
}

const setFilter = (value: any) => {
    Object.assign(filterOptions, value)
    if (filterOptions.resourceLevel !== 'local' ||
        (filterOptions.resourceBasicCatalog !== 'all' && filterOptions.resourceBasicCatalog !== 'spatial') ||
        (filterOptions.resourceThemeCatalog !== 'all' && filterOptions.resourceThemeCatalog !== 'shugongji') ||
        (filterOptions.resourceType !== 'all' && filterOptions.resourceType !== 'api')) {
        tableData.value = []
    } else {
        tableData.value = apiData
    }
}

const tableData = ref<any[]>(apiData)
</script>

<template>
    <ContentWrap title="武穴市编码赋码工具资源">
        <Level @get-filter-options="setFilter" />
        <Table :columns="[]" :data="tableData" custom-content :card-wrap-style="{
            width: '100%',
            marginBottom: '20px',
            marginRight: '20px',
            marginLeft: '20px'
        }">
            <template #content="row">
                <div class="flex cursor-pointer" style="align-items: center; justify-content: space-between;"
                    @click="goDetail(row)">
                    <div class="flex">
                        <div class="pr-16px" style="display: flex;flex-direction: column;justify-content: center">
                            <Icon icon="mdi:plug" :size="40" color="#4279e9" />
                            <div class="font-size-12px" style="margin-top: 10px;color:#4279e9">接口</div>
                        </div>
                        <div>
                            <div class="mb-12px font-700 font-size-16px">{{ row.name }}</div>
                            <div class="line-clamp-3 font-size-12px">{{ row.des }}</div>
                            <div style="display: flex;align-items: center;margin-top: 10px;">
                                <ElTag type="primary">{{ transformState(row.share) }}</ElTag>
                                <span class="ml-16px font-size-14px" style="color: #606266;">发布时间： {{ row.publishTime
                                    }}</span>
                            </div>
                        </div>
                    </div>
                    <BaseButton style="float: right;" type="primary">查看详情</BaseButton>
                </div>
            </template>
        </Table>
    </ContentWrap>
</template>
